<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./font/iconfont.css">
		<script src="font/iconfont.js"></script>
		<link rel="stylesheet" type="text/css" href="css/shouye.css" />
		<script src="js/animal.js"></script>
		<script src="js/lunbotu.js"></script>
		<script src="js/up-and-down.js"></script>
		
		<title></title>
	</head>
	<body>

		<!-- 顶部 -->
		
		<header id="head">
			
			<ul>
				<li>
					<span class="iconfont icon-bilibili"></span>
				</li>
				<li>
					<span class="iconfont icon-sousuo"></span>
				</li>
				<li>
					<a href="my1.html">
					<span class="iconfont icon-morentouxiang"></span>
					</a>
				</li>
				<li>
					下载App
				</li>
			</ul>
		</header>

		<!-- 搜索 -->

		<div id="fixed">
			<div class="search-wrap">

			<div class="search-touxiang">
				<a href="my1.html">
					<span class="iconfont icon-morentouxiang"></span>
				</a>
			</div>
			<!-- 中间块写标准流就行，不设置宽度 -->

			<div class="search">
				<div class="sousuo-box">
					<form action="">
						<span class="iconfont icon-sousuo"></span>
						<input type="search" value="龙的传人2.0" placeholder="" id="search" name="search">
					</form>
				</div>
			</div>
			<div class="search-right">
				<a href="#">
					<span class="iconfont icon-youxiyouxiji"></span>
					<span class="iconfont icon-xiaoxizhongxin"></span>
				</a>
			</div>

		</div>

		<!-- 文字栏 -->

		<div id="word">
			<ul class="nav">
				<li class="nav-item">
					<a class="nav-link" href="#">直播</a>
				</li>

				<li class="nav-item active">
					<a class="nav-link" href="#">推荐</a>
				</li>

				<li class="nav-item">
					<a class="nav-link" href="remen.html">热门</a>
				</li>

				<li class="nav-item">
					<a class="nav-link" href="donghuaend.html">动画</a>
				</li>


				<li class="nav-item">
					<a class="nav-link" href="#">影视</a>
				</li>


				<li class="nav-item">
					<a class="nav-link" href="#">建党百年</a>
				</li>


			</ul>
		</div>
</div>

		<!-- 文本 -->
		<!-- 空白 -->
		<div class="bai">

		</div>
		<!-- 滑动照片 -->
		<div class="content-one">
			<div class="main">

				<!-- 左按钮 -->
				<a href="javascript:;" class="left">&lt;</a>
				<!-- 右按钮 -->
				<a href="javascript:;" class="right">&gt;</a>
				<!-- 滚动区 -->
				<ul>
					<li>
						<a href="#"><img src="./image/guidong1.jpg"></a>
					</li>
					<li>
						<a href="#"><img src="./image/guidong2.jpg"></a>
					</li>
					<li>
						<a href="#"><img src="./image/guidong1.jpg"></a>
					</li>

				</ul>
				<!-- 小圆 -->
				<ol class="circle">
				</ol>

			</div>
		</div>

		<!-- 中间内容 -->
		<div class="context">


		</div>

			<!-- 临时空白 -->
			<div class="bai">

			</div>


			<!-- 底部 -->
			<div class="footer">
				<ul id="bnav">
					<li class="footer-nav active">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-shouye2"></use>
						</svg>
						<p><a href="#" class="active">首页</a></p>
					</li>

					<li class="footer-nav">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-fengche"></use>
						</svg>
						<p><a href="#">动态</a></p>
					</li>

					<li class="footer-nav">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-fabu1"></use>
						</svg>
						<p><a href="#"></a></p>
					</li>

					<li class="footer-nav">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-iconset0317"></use>
						</svg>
						<p><a href="#">会员购</a></p>
					</li>
					

					<li class="footer-nav">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-bilibili-line"></use>
						</svg>
						<p><a href="my1.html">我的</a></p>
					</li>
				</ul>

			</div>

		

	</body>
	
	<script>
	var json = [{
			imglink:"image/guitar.jpg",
			link: "xianqing.html",
			title:"【限时5折】Tiger谭秋娟的吉他弹唱入门课",
			time: "5:20",
			play:"11.6万",
			number: "165",
		},
		{
				imglink:"image/guitar.jpg",
				link: "xianqing.html",
				title:"【限时5折】Tiger谭秋娟的吉他弹唱入门课",
				time: "5:20",
				play:"11.6万",
				number: "165",
		},
		{
				imglink:"image/guitar.jpg",
				link: "xianqing.html",
				title:"【限时5折】Tiger谭秋娟的吉他弹唱入门课",
				time: "5:20",
				play:"11.6万",
				number: "165",
		},
		
		{
				imglink:"image/guitar.jpg",
				link: "xianqing.html",
				title:"【限时5折】Tiger谭秋娟的吉他弹唱入门课",
				time: "5:20",
				play:"11.6万",
				number: "165",
		},
		
		{
				imglink:"image/guitar.jpg",
				link: "xianqing.html",
				title:"【限时5折】Tiger谭秋娟的吉他弹唱入门课",
				time: "5:20",
				play:"11.6万",
				number: "165",
			},
			
		{
				imglink:"image/guitar.jpg",
				link: "xianqing.html",
				title:"【限时5折】Tiger谭秋娟的吉他弹唱入门课",
				time: "5:20",
				play:"11.6万",
				number: "165",
		},	
		{
				imglink:"image/guitar.jpg",
				link: "xianqing.html",
				title:"【限时5折】Tiger谭秋娟的吉他弹唱入门课",
				time: "5:20",
				play:"11.6万",
				number: "165",
		},	
		{
				imglink:"image/guitar.jpg",
				link: "xianqing.html",
				title:"【限时5折】Tiger谭秋娟的吉他弹唱入门课",
				time: "5:20",
				play:"11.6万",
				number: "165",
		},	
		{
				imglink:"image/guitar.jpg",
				link: "xianqing.html.html",
				title:"【限时5折】Tiger谭秋娟的吉他弹唱入门课",
				time: "5:20",
				play:"11.6万",
				number: "165",
		},	
		{
				imglink:"image/guitar.jpg",
				link: "xianqing.html",
				title:"【限时5折】Tiger谭秋娟的吉他弹唱入门课",
				time: "5:20",
				play:"11.6万",
				number: "165",
		},	
		];
		var plist = document.querySelector(".context");
		json.forEach(function(c, i) {
			var nli = document.createElement("div"); /* 创建div元素 */
			nli.innerHTML =`
			<div class="view">
			
				<a href="${c.link}">
					<img src="${c.imglink}" alt="">
					<u class="xuanfu">
						<li>
							<span class="iconfont icon-bofang"></span>
							<span class="shuzi">${c.play}</span>
			
						</li>
						<li>
							<span class="iconfont icon-danmushu"> </span>
							<span class="shuzi">${c.number}</span>
						</li>
						<li>
							<span class="shuzi">${c.time}</span>
						</li>
					</u>
				
				 <div class="view-word">
					<p>${c.title}</p>
				 </div>
				 </a>
			</div>
			`;
				//es6新的字符串语法，内部可包括引号，包括变量&{}
				plist.appendChild(nli);
				//在jliat的内部最后增加nli.
			});
		
			
	</script>
	

</html>

